<template>
  <footer>
    <div class="footer">
      <div class="footer-top">
        <div class="footer-content">
          <!-- footer内容 -->
          <el-row>
            <el-col :span="18">
              <div class="footer-left">
                <ul class="footer-left-ul">
                  <li style="width:13.5%">
                    <dl>
                      <dt @click="onclick(0)">品牌</dt>
                      <dd @click="onclick(0)">关于我们</dd>
                      <dd @click="onclick(0)">产品未来</dd>
                      <dd @click="onclick(0)">我们的目标</dd>
                    </dl>
                  </li>
                  <li style="width:26%">
                    <dl style="text-align:center">
                      <dt @click="onclick(1)" style="text-align:center">产品</dt>
                      <dd @click="onclick(1)" style="text-align:center">“哆啦快运”APP货主端</dd>
                      <dd @click="onclick(1)" style="text-align:center">“哆啦快运”APP司机端</dd>
                      <dd @click="onclick(1)" style="text-align:center;margin-left:-4px">智慧物流管理Web</dd>
                    </dl>
                  </li>
                  <li style="width:16%;margin-left:11.5%">
                    <dl>
                      <dt @click="onclick(2)">招贤纳士</dt>
                      <dd @click="onclick(2)">新媒体运营</dd>
                      <dd @click="onclick(2)">Web前端</dd>
                      <dd @click="onclick(2)">视觉设计师</dd>
                    </dl>
                  </li>
                  <li style="width:10%;margin-left:14%">
                    <dl>
                      <dt @click="onclick(3)">合作伙伴</dt>
                      <dd @click="onclick(3)">合作伙伴</dd>
                      <dd style="color:transparent">合作伙伴</dd>
                      <dd style="color:transparent">合作伙伴</dd>
                    </dl>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :span="5" style="margin-left:4%;margin-top:-30px">
              <div class="footer-right">
                <div class="footer-right-top">
                  <img src="@/assets/footer-message.png" alt="消息" />
                  <p>在线联系人</p>
                </div>
                <div class="footer-right-bottom">
                  <p>翟先生</p>
                  <p>17585588755</p>
                </div>
              </div>
            </el-col>
          </el-row>

          <div class="company-message">
            <span>&copy;2019&nbsp;贵州梵途科技有限公司 版权所有 保留一切权利</span>
            <span>公司地址: 贵州省贵阳市观山湖区高科一号C座9</span>
            <span>ICP: 黔ICP备18012141号-1</span>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: "Header",
  methods: {
    returnTop: function() {
      document.querySelector("#header").scrollIntoView(true);
    },
    link(link) {
      document.querySelector(link).scrollIntoView(true);
    },
    onclick: function(index) {
      // this.dynamic = index;
      this.changeTopFlag(index);
      if (index == 0) {
        this.$router.push({
          name: "home"
        });
      } else if (index == 1) {
        this.$router.push({
          name: "product"
        });
      } else if (index == 2) {
        this.$router.push({
          name: "recruit"
        });
      } else if (index == 3) {
        this.$router.push({
          name: "business"
        });
      }
    },
    changeTopFlag(num) {
      this.$store.state.topFlag = num;
    }
  }
};
</script>

<style scoped>
.footer {
  height: 358px;
  color: #fff;
}
.footer-top {
   /*padding-top: 6px;*/
  height: 314px;
  background-color: #333;
}
.footer-content {
  width: 62%;
  height: 314px;
  margin: 0 auto;
}
/* footer left */
.footer-left-ul {
  display: flex;
  align-items: center;
  height: 314px;
}
.footer-left-ul > li {
  /* width: 25%; */
  display: flex;
  justify-content: center;
}
dl,
dt,
dd {
  width: 100%;
  /* text-align: center; */
  cursor: pointer;
}

dt {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 30px;
  line-height: 2rem;
}
dd {
  margin-bottom: 10px;
  font-size: 0.875rem;
  line-height: 1.6rem;
  font-weight: normal;
}
/* footer right */
.footer-right-top {
  display: flex;
  margin-left: 25%;
  font-size: 1.6rem;
  margin-top: 98px;
  font-weight: 300;
}
.footer-right-top img {
  width: 28px;
  height: 23px;
  padding: 5px 10px 0px 0px;
}
.footer-right-bottom {
  margin-left: 26%;
  margin-top: 25px;
  font-size: 1rem;
}
.footer-right-bottom p:nth-of-type(2) {
  font-size: 1.6rem;
  line-height: 33px;
  font-weight: 300;
}
.return {
  width: 76px;
  height: 76px;
  position: absolute;
  right: -23%;
  bottom: 35%;
  cursor: pointer;
}
/* 公司信息 */
.company-message {
  width: 100%;
  height: 47px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  color: #999999;
  font-size: 0.875rem;
}
.company-message span {
  margin-right: 20px;
}
</style>
